@import './normalize.css';

// 公共变量
:root {
  // 最大宽度
  --ex-max-width: 100%;
  /* 白色 */
  --ex-white: #fff;
  /* 黑色 */
  --ex-black: #000;
}

// 引入字体
@font-face {
  font-family: 'Arial';
  src: url('/public/fonts/Arial.ttf');
  font-display: auto;
}
// 引入字体
@font-face {
  font-family: 'PingFang SC';
  src: url('/public/fonts/PingFang-SC-Regular.ttf') format('opentype');
  font-display: auto;
}
@font-face {
  font-family: 'PingFang-bold';
  src: url('/public/fonts/PingFang-SC-Bold.ttf') format('opentype');
  font-display: auto;
}
@font-face {
  font-family: 'PingFang-light';
  src: url('/public/fonts/PingFang-SC-Light.ttf') format('opentype');
  font-display: auto;
}

@media (min-width: 640px) {
  // pc
  :root {
    /* 最大宽度 */
    //--ex-max-width: 375px;
  }

  // 滚动条
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    //background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    display: block;
    min-height: 4px;
    min-width: 4px;
    border-radius: 6px;
    background-color: rgb(217, 217, 217);
  }

  ::-webkit-scrollbar-thumb:hover {
    display: block;
    min-height: 4px;
    min-width: 4px;
    border-radius: 6px;
    background-color: rgb(159, 159, 159);
  }
}

@media (max-width: 640px) {
  :root {
    /* 最大宽度 */
    --ex-max-width: 100%;
  }
}
* {
  line-height: 1.2;
  user-select: none;
  user-drag: none;
}

textarea {
  user-select: text;
}

input {
  user-select: text;
  background: var(--ex-default-background-color);
}

body,
html {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: var(--ex-default-background-color);
  color: var(--ex-default-font-color);
  font-family: PingFang SC, Microsoft YaHei;
  overflow: auto; /* 保留滚动功能 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
}
.bodyContainer {
  //margin-top: 40px;
}
p,
span,
div {
  font-family: PingFang SC, Microsoft YaHei;
  // font-size: 14px;
  // color: #333;
}
#app {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  max-width: var(--ex-max-width);
  // box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}

img {
  object-fit: contain;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.text-ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; //多行在这里修改数字即可
  overflow: hidden;
  -webkit-box-orient: vertical;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
.columnFlex {
  display: flex;
  flex-direction: column;
}

.container {
  width: 1280px;
  padding: 0 10px;
  margin: 0 auto;
}
.maxContainer {
  width: 1560px;
  padding: 0 10px;
  margin: 0 auto;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 3px 100px #fff inset; // 改变填充背景色
}
// 取消状态是number 的上下箭头
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  //-webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}
.left-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  .left-side-item {
    border: 1px solid #5F3789;
    background: #fff;
    color: #5F3789;
    border-radius: 8px;
    padding: 12px 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      color: #fff;
      background: #5F3789;
      transform: scale(1.1);
      //box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      box-shadow 0.5s ease,
      filter 0.5s ease;
    }
  }
  .active {
    color: #fff;
    background: #5F3789;
  }
}
